<template>
    <div class="detail_module_panel tel_seperate">
        <div class="panel_info_content">
            <div class="module_content">
                <div class="content_panel project_modules">
                    <div class="table_list">
                        <el-table :data="tableData" style="width: 100%">
                            <el-table-column prop="id" :label="$t('common.serialNumber')" width="180"></el-table-column><!--序号-->
                            <el-table-column prop="userName" :label="$t('common.accountName')" width="180"></el-table-column><!--账号名称-->
                            <el-table-column prop="roleId" :label="$t('common.role')" width="180"><!--角色-->
                                <template slot-scope="{row}">{{ row.roleId | switchRoleType }}</template>
                            </el-table-column>
                            <el-table-column prop="updateTime" :label="$t('common.latestOperatingTime')"><!--最新操作时间-->
                                <template slot-scope="{row}">{{ row.updateTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                            </el-table-column>
                            <el-table-column prop="entrySwitch" :label="$t('common.isAssignOrder')"><!--是否进件-->
                                <template slot-scope="{row}">
                                    <el-switch
                                            v-model="row.entrySwitch"
                                            :disabled="row.roleId == 0"
                                            active-color="#13ce66"
                                            inactive-color="#ff4949"
                                            active-value="1"
                                            inactive-value="0"
                                            @change="changeSeperate(row)"
                                    ></el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column prop="inputOperator" :label="$t('common.isAssignOrderOperator')"></el-table-column><!--是否进件操作人-->
                            <el-table-column align="left" :label="$t('common.operation')">
                                <template slot-scope="scope">
                                    <el-button @click="setRoleType(scope.row)" type="text">{{ $t('common.assignRole') }}</el-button><!--分配角色-->
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--分页组件-->
                        <!-- <pagination @pageChange="pageChange" :page="page">分页组件</pagination> -->
                    </div>
                </div>
            </div>

            <alert-dialog :title="$t('common.assignRole')" :visible.sync="setRoleTypeDialog" width="416px">
                <el-form ref="setRoleTypeForm" :model="setRoleTypeForm" :rules="setRoleTypeFormRules"
                         label-position="top">
                    <el-form-item :label="$t('common.accountName')"><!--账号名称-->
                        <el-input :disabled="true" v-model="setRoleTypeForm.name" type="text" :placeholder="$t('common.accountName')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('common.roleType')" prop="role"><!--角色类型-->
                        <el-select v-model="setRoleTypeForm.role" style="width: 100%;">
                            <el-option v-for="(item, $index) in keyMap.telRoleList" :key="$index" :value="item.value" :label="item.label"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="setRoleTypeSubmit" type="primary">{{ $t('common.confirm') }}</el-button>
                    <el-button @click="setRoleTypeDialog = false" type="default">{{ $t('common.cancel') }}</el-button>
                </div>
            </alert-dialog>

        </div>
    </div>
</template>

<script>
    import mixin from "@/service/mixin";
    import AlertDialog from '@/components/alert-dialog';
    import {keyMap} from '@/config'

    let that = null;
    export default {
        name: "tel-seperate",
        components: {
            AlertDialog
        },
        mixins: [mixin],
        data() {
            return {
                tableData: [{id: 1}],
                userInfo: {},
                setRoleTypeDialog: false,
                setRoleTypeForm: {
                    name: '',
                    role: '',
                },
                setRoleTypeFormRules: {
                    role: [
                        {required: true, message: this.$t('verify.plsChooseRoleType')},//请选择角色类型
                    ],
                },
                setRoleTypeData: '',
                keyMap,
            };
        },
        methods: {
            getTableData() {
                this.$api.tel.queryTelUsers({userId: this.userInfo.id}).then(res => {
                    // const {status ,data,error} = res;
                    // if('1' === status && '00000000' === error && data){
                    const {code, data} = res;
                    if (0 === code && data) {
                        this.tableData = data || [];
                        // this.page.recordsTotal = data.pageCount;
                        this.tableMaxHeight = window.document.body.clientHeight - 300;
                    }
                })
            },
            paginationChange() {
                this.getTableData();
            },
            changeSeperate(row) {
                let params = {
                    "id": row.id,
                    "entrySwitch": row.entrySwitch,
                    "userId": this.userInfo.id,
                    "inputOperator": this.userInfo.skillTypeId == 100 ? this.userInfo.username : ""
                };
                this.$api.tel.updateIsEntrySwitch(params).then(res => {
                    const {code} = res;
                    if (0 === code) {
                        this.$message.success(this.$t('common.successfulOperation'));
                        this.getTableData();
                    } else {
                        this.$message.error(this.$t('common.failedOperation'));
                        row.entrySwitch = row.entrySwitch == 1 ? 0 : 1;
                    }
                });
            },
            setRoleType(row) {
                this.setRoleTypeData = row;
                this.$refs.setRoleTypeForm.resetFields();
                this.setRoleTypeForm.name = row.userName;
                this.setRoleTypeDialog = true;
            },
            setRoleTypeSubmit() {
                this.$refs.setRoleTypeForm.validate(() => {
                    const params = {
                        roleId: this.setRoleTypeForm.role,
                        distribName: this.$storage.get("user").username,
                        id: this.setRoleTypeData.id
                    };
                    this.$api.tel.updateElecRole(params).then(res => {
                        const {code} = res;
                        if ('0' == code) {
                            this.setRoleTypeDialog = false;
                            this.$message.success(this.$t('common.successfulOperation'));
                            this.getTableData();
                        }
                    })
                })
            }
        },
        filters: {
            // 角色类型
            switchRoleType(type) {
                switch (+type) {
                    case 0:
                        return that.$t('tel.waitAssign');// 待分配
                    case 1:
                        return that.$t('tel.telCommissioner');// 电核专员
                    case 2:
                        return that.$t('tel.telSupervisor');// 电核主管
                    case 3:
                        return that.$t('tel.telManager');// 电核经理
                    default:
                        return '';
                }
            },
        },
        created() {
            that = this;
            this.userInfo = this.$storage.get("user");
            this.getTableData();
        }
    };
</script>

<style>
</style>

